---
title: "Select"
description: A customizable dropdown menu that lets users choose a single option from a predefined list, optimized for accessibility and usability.
order: 2
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Select.html#props"]
---

## Basic

A select component displays a dropdown list of options, allowing users to pick one from the list.
<How minW60 toUse="pickers/select/select-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/select
```

## Composed components
<Composed components={['field', 'dropdown', 'popover']}/>

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```

<SourceCode toShow='select'/>

## Anatomy
```
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
} from "@/components/ui/select"
```

```
const software = [
  { id: 1, name: "Adobe Photoshop" },
  { id: 2, name: "Sketch" },
  { id: 3, name: "Figma" },
  { id: 4, name: "Adobe XD" },
  { id: 5, name: "InVision" },
]

<Select aria-label="Design software" placeholder="Select a software">
  <SelectTrigger />
  <SelectContent items={software}>
    {(item) => (
      <SelectItem id={item.id} textValue={item.name}>
        {item.name}
      </SelectItem>
    )}
  </SelectContent>
</Select>
```

## Section
A select component can display items grouped together in sections.
<How minW60 toUse="pickers/select/select-section-demo" />

## Searchable select
Sometimes, you may need to search for an item in a select component. Here's how you can do it.
<How minW60 toUse="pickers/select/select-searchable-demo" />

## With icon

<How minW60 toUse="pickers/select/select-with-icon-demo" />

## With avatar
<How minW60 toUse="pickers/select/select-with-avatar-demo" />

## Multiple select
Enable selecting more than one option by setting `selectionMode` to `multiple`.
<How minW60 toUse="pickers/select/select-multiple-demo" />


## Validation
If a user submits the form without selecting an item, an error message will appear.
<How minW60 toUse="pickers/select/select-validation-demo" />

## Label
When the `children` option is a string, `Select.Label` will automatically wrap it. However, if the option includes an icon or avatar, you'll need to manually define the wrapper like this:

```
<SelectItem id="discord" textValue="Discord">
  <BrandDiscordIcon />
  <SelectLabel>Discord</SelectLabel>
</SelectItem>
```

## Details description
If you need to provide more information about an option, use the `Select.Description` component to display additional details.
<How minW60 toUse="pickers/select/select-details-description-demo" />

## Controlled
You can control the select component by passing the `selectedKey` prop.
<How minW60 toUse="pickers/select/select-controlled-demo" />

## Uncontrolled
You can uncontrolled the select component by passing the `defaultSelectedKey` prop.
<How minW60 toUse="pickers/select/select-uncontrolled-demo" />


## Disabled
When the select component is disabled, it cannot be interacted with.
<How minW60 toUse="pickers/select/select-disabled-demo" />
